<template>
  <!-- 门诊挂号 -->
  <div>
    <el-row>
      <el-col :span="12" />
    </el-row>
    <el-row>
      <el-col :span="9">
        <el-form
          ref="form"
          :disabled="form.disabled"
          :model="form"
          label-width="80px"
          style="margin-top: 10px"
        >
          <el-form-item label="患者姓名">
            <el-input
              v-model="form.name"
              placeholder="请输入患者姓名"
              class="charfull"
            />
          </el-form-item>
          <el-form-item label="患者性别">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" value="man" />
              <el-option label="女" value="mis" />
            </el-select>
          </el-form-item>

          <el-form-item label="患者年龄">
            <el-input-number
              v-model="form.age"
              :min="1"
              :max="100"
              label="患者年龄"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="form.php"
              type="number"
              placeholder="请输入手机号"
              class="charfull"
            />
          </el-form-item>
          <el-form-item label="地址">
            <el-input
              v-model="form.address"
              type="textarea"
              placeholder="请输入地址"
            />
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          style="margin-left: 79px"
          @click="make()"
        >立即预约</el-button>
        <el-button icon="el-icon-refresh" @click="Reset()">重置</el-button>
      </el-col>
      <el-col :span="14" :offset="1">
        <el-row style="margin-top: 10px">
          <el-col :span="23" style="margin-left: 10px">
            姓名：<el-input
              v-model="name"
              placeholder="请填写姓名"
              class="selectall"
            />
            手机号：<el-input
              v-model="php"
              placeholder="请填写手机号"
              class="selectall"
            />
            <el-button
              type="primary"
              @click="selectBynameAndphp()"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-table
          style="margin-top: 20px; text-align: center"
          :data="patientlist"
        >
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="mobile" label="手机号" width="180" />
          <el-table-column prop="address" label="地址" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="visit(scope.row)"
              >选定</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getPatientList,
  getPatientListBynameAndphp
} from '../../api/doctor/visit'
import { open3 } from '../../api/doctor/alert'

export default {
  name: 'Register',
  data() {
    return {
      name: '',
      php: '',
      form: {
        disabled: false,
        name: '',
        sex: '',
        age: 18,
        php: '',
        address: ''
      },
      patientlist: []
    }
  },
  mounted() {
    getPatientList().then((re) => {
      this.patientlist = re.data.data
    })
  },
  methods: {
    // 动态赋值
    visit(e) {
      this.form.name = e.name
      this.form.age =
        parseInt(new Date().getFullYear()) -
        parseInt(new Date(e.birthday).getFullYear())
      if (e.sex === 1) {
        this.form.sex = '男'
      } else {
        this.form.sex = '女'
      }
      this.form.php = e.mobile
      this.form.address = e.address
      this.form.disabled = true
    },
    // 查询
    selectBynameAndphp() {
      const formdata = new FormData()
      formdata.append('name', this.name)
      formdata.append('php', this.php)
      getPatientListBynameAndphp(formdata).then((re) => {
        this.patientlist = re.data.data
      })
    },
    // 表单提交
    make() {
      if (this.form.disabled) {
        // 跳过验证
      } else {
        // 验证合法
        if (this.form.name === '') {
          open3(this, '姓名不能为空')
          return
        }
        if (this.form.sex === '') {
          open3(this, '性别不能为空')
          return
        }
        if (this.form.php === '') {
          open3(this, '手机号不能为空')
          return
        }
      }
    },
    // 表单重置
    Reset() {
      this.form.name = ''
      this.form.age = 18
      this.form.sex = ''
      this.form.php = ''
      this.form.address = ''
      this.form.disabled = false
    }
  }
}
</script>

<style>
.selectall {
  width: 160px;
}
.charfull {
  width: 300px;
}
</style>
